<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- <link rel="icon" href="../../favicon.ico"> -->
    <title>Research Show Time</title>
   
    <link href="../libs/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="../css/public.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Research WoW</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="index.html">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <div class="container res-list">
      <div class="res-bread-nav">
          <ol class="breadcrumb">
            <li><a href="index.html">Home</a></li>
            <li class="active">List</li>
          </ol>  
      </div>
      
      <div class="panel panel-primary">
        <div class="panel-heading toggleShow">
          <h3 class="panel-title ">
            Video Public Attrs
            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
          </h3>

        </div>
        <div class="panel-body" style="display:none;">
            <table class="table table-hover table-attrs">
                <thead>
                  <tr>
                    <th>属性名</th>
                    <th>属性值</th>
                  </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
      </div>  
      
      <div class="panel panel-primary">
        <div class="panel-heading toggleShow">
          <h3 class="panel-title ">
            Video Lists
            <span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
          </h3>

        </div>
        <div class="panel-body panel-search">
            <div class="form-group" style="margin-top:10px;">
              <label  class="col-sm-2 control-label">类型</label>
              <div class="col-sm-6">
                  <select class="form-control selectType" >
                    <option value="0">全部</option>
                    <option value="1">有效-无gt</option>
                    <option value="2">有效-有gt-正确</option>
                    <option value="3">有效-有gt-错误</option>      
                    <option value="4">无效-无gt</option>
                    <option value="5">无效-有gt</option>
                  </select>
              </div>
              <div class="col-sm-3">
                  <button class="btn btn-primary btn-search">查询</button>
              </div>
            </div>
            
        </div>
        <div class="panel-body">
            <table class="table table-hover table-lists">
                <thead>
                  <tr>
                    <th width="10%">Index</th>
                    <th width="20%">Face</th>
                    <th width="34%">gt-card</th>
                    <th width="34%">match-card</th>
                  </tr>
                </thead>
                <tbody>
                    
                </tbody>
                <tfoot>
                  <tr><td colspan=3><ul class="pagination" id="pagination"></ul></td></tr>
                </tfoot>
            </table>
        </div>
      </div>  
      

    </div><!-- /.container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="../libs/jquery.min.js"></script>
    <script src="../libs/bootstrap/js/bootstrap.min.js"></script>
    <script src="../libs/jqPaginator.js"></script>
    <script type="text/javascript">
        var UrlParams = {};
        (function(){
          var i, aParams = document.location.search.substr(1).split('&'), aParam;
          for (i=0; i<aParams.length; i++){
            aParam = aParams[i].split('=');
            if (aParam[0].length > 0) {
              UrlParams[aParam[0]] = decodeURIComponent(aParam[1]);
            } 
          }
        })();

       var dataList;
       $(function(){
          _initEvent();

          $.ajax({
              "url":"/list/"+UrlParams.id+"?_t="+new Date().getTime(),
              dataType:'json',
              success:function(data){
                  _dealAttrData(data.mata);
                  _initPage(data.list);
              }
          });
          
       }); 
       function _initPage(data){
          if(!data)return;
          $.jqPaginator('#pagination', {
              totalCounts: data.length,
              pageSize:20,
              visiblePages: 5,
              currentPage: 1,
              onPageChange: function (num, type) {
                //dataList = data.concat();
                var start = (num-1)*(this.pageSize);
                var end = num*(this.pageSize);
                _dealListData(data.slice(start,end));
              }
          });
       }
       function _initEvent(){
          $('.toggleShow').on('click',function(){
              var dealSig = $(this).find('.glyphicon');
              dealSig.toggleClass('glyphicon-minus glyphicon-plus');
              $(this).siblings('.panel-body')[(dealSig.hasClass('glyphicon-minus')?'slideDown':'slideUp')]();
          });

          $('.btn-search').on('click',function(){

              var type = $('.selectType').val();
              $.ajax({
                  "url":"/list/"+UrlParams.id+"?type="+type+"&_t="+new Date().getTime(),
                  dataType:'json',
                  success:function(data){
                      _initPage(data.list);
                  }
              });
              
          });

       }
       function _dealAttrData(objs){
            var str = "";
            $.each(objs,function(key,val){
                str += '<tr><td>'+key+'</td><td><pre>'+JSON.stringify(val,null,4)+'</pre></td></tr>';
            });
            $('.table-attrs tbody').append(str);
        }
        function _dealListData(data){
            var str = "";
            for(var i=0,len=data.length;i<len;i++){
                var obj = data[i];
                var face = obj.best_face;
            var gtCard = obj.gt_card || {};
            var matchCard = obj.match_card || {};
                str += '<tr>';
                str += '<td class="'+(obj.errorIndex?'errorIndex':'correctIndex')+'">'+(obj.errorIndex?obj.errorIndex:obj.correctIndex)+'</td>';
                str += '<td><a class="imgWrap" href="detail.html?parentId='+UrlParams.id+'&id='+obj.index+'"><span style="background:url('+face.image_path+'?_t='+new Date().getTime()+') center no-repeat;background-size: contain;" ></span></a><p>'+obj.avaliable_len+'/'+obj.total_len+'</p><p>track_id：'+JSON.stringify(obj.track_id)+'</p></td>';

                str += '<td><div class="imgWrap"><span style="background:url('+gtCard.image_path+') center no-repeat;background-size: contain;" ></span></div><p>score：'+obj.gt_score+'</p>';
                str += _dealItemAttr(gtCard);
                str += '</td>';

                str += '<td><div class="imgWrap"><span style="background:url('+matchCard.image_path+') center no-repeat;background-size: contain;" ></span></div><p>score：'+obj.match_score+'</p>';
                str += _dealItemAttr(matchCard);
                str += '</td>';
                str += '</tr>';
            }
            $('.table-lists tbody').empty().append(str);
        }
        function _dealItemAttr(obj){
            var str = "";
            if(!obj)return;
            $.each(obj,function(key,value){
                if(key=='image_path'||key=='landmarks'){
                    return true;
                }else{
                  str += '<p>'+key+':'+JSON.stringify(value)+'</p>';  
                }
            }); 
            return str;
        }
    </script>    
  </body>
</html>
